<template>
  <div>
    <div>
      <h3>桌位管理</h3>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="diningId" label="编号" width="216">
        </el-table-column>
        <el-table-column prop="diningType" label="桌位名称" width="216">
        </el-table-column>
        <el-table-column prop="diningNum" label="可容纳人数" width="216">
        </el-table-column>
        <el-table-column label="状态" width="336">
          <template slot-scope="scope">
            {{ scope.row.diningStatus == 0 ? "正常" : "正在用餐" }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="236">
          <template slot-scope="scope">
            <el-button
              @click="(showModal = true), (showModal2 = false)"
              @click.native.prevent="bianjiRow(scope.$index, tableData)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <h2>编辑</h2>
        <span>编号:</span><input type="text" v-model="id" />
        <span>桌位名称:</span><input type="text" v-model="da" />
        <span>可容纳人数:</span><input type="text" v-model="ren" />
        <span>状态:</span><input type="text" v-model="chang" />
        <div>
          <button @click="handleConfirm(id, da, ren, chang)">确定</button>
          <button @click="handleCancel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { findAlldining, update } from "@/apis/zhaobaoyi/zhaobaoyi.js";
export default {
  data() {
    return {
      tableData: [],
      showModal: false,
      id: "",
      da: "",
      ren: "",
      chang: "",
    };
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    bianjiRow(index, rows) {
      console.log(index);
      console.log(rows);
      this.id = rows[index].diningId;
      this.da = rows[index].diningType;
      this.ren = rows[index].diningNum;
      this.chang = rows[index].diningStatus == 0 ? "正常" : "正在用餐";
    },
    show() {
      findAlldining().then((ok) => {
        console.log(ok.data.data);
        this.tableData = ok.data.data;
      });
    },
    handleConfirm(id, da, ren, chang) {
      this.showModal = false;
      update(id, da, ren, chang).then((ok) => {
        console.log(ok);
        this.show();
      });
    },
    handleCancel() {
      this.showModal = false;
    },
  },
  mounted() {
    findAlldining().then((ok) => {
      console.log(ok.data.data);
      this.tableData = ok.data.data;
    });
  },
};
</script>

<style scoped>
h3 {
  width: 1277px;
  height: 45px;
  background-color: rgb(220, 220, 220);
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: #e4e6eb;
  padding: 20px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: 1;
  position: absolute;
  background-color: #ebeef5;
  z-index: 0;
}
</style>